<template>
	<!-- 账单信息 -->
	<view>
		<view class="status" :style="{height:`${statusHeight}px`}"></view>
		<view :style="{height:`${statusHeight}px`}" style="background-color: #F5F5F5;"></view>
		<view class="bg"></view>
		<view class="navTitleShell">
			<view class="navImg">
				<image class="headImg" src="/static/image/moduleOne.png"></image>
			</view>
			<view class="eventShell">
				<view class="eventBigText">{{info.eventName}}</view>
				<view class="eventSmallText">商户手册 > </view>
			</view>
			<view class="allPriceShell">
				<view class="priceText">未结算金额</view>
				<view class="allPrice">{{info.allPrice}}</view>
			</view>
			
			<view class="navTitle">
				<view class="navTitleTextShell" @click="switchHandle(1)">
					<view class="navTitleText" :class="current==1?'active':''">日报</view>
					<view class="redLine" v-if="current==1"></view>
				</view>
				<view class="navTitleTextShell" @click="switchHandle(2)">
					<view class="navTitleText" :class="current==2?'active':''">月报</view>
					<view class="redLine" v-if="current==2"></view>
				</view>
				<view class="navTitleTextShell" @click="switchHandle(3)">
					<view class="navTitleText" :class="current==3?'active':''">已结算</view>
					<view class="redLine" v-if="current==3"></view>
				</view>
			</view>
		</view>
		<view style="height: 600rpx"></view>
		<view class="bottomShell">
			<block v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="time">{{item.time}}</view>
					<view class="titleShell">
						<view class="priceShell">{{item.num}}笔订单</view>
						<view class="priceText1">总金额：{{item.allPrice}}元</view>
					</view>
					<view class="dayPrice">本日实收{{item.allPrice}}元</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusHeight: 0, //状态栏
				current: 1, //标题活跃值
				info:{
					eventName:"场地名",
					allPrice:70270.54
				},
				list:[
					{
						time:"2021-03-04",
						num:120,
						allPrice:1200
					},
					{
						time:"2021-03-04",
						num:120,
						allPrice:1200
					},
					{
						time:"2021-03-04",
						num:120,
						allPrice:1200
					}
				]
			}
		},
		onReady() {
			this.statusHeight = getApp().globalData.statusBarHeight
		},
		methods: {

		}
	}
</script>

<style scoped>
	.status {
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F5F5F5;
		z-index: -1;
	}

	.navTitleShell {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
	}

	.navImg {
		width: 100%;
		padding: 30rpx 0;
	}

	.headImg {
		width: 56rpx;
		height: 56rpx;
		display: block;
		border-radius: 50%;
	}

	.navTitle {
		width: 70%;
		display: flex;
		align-items: center;
		margin-top:40rpx;
		justify-content: space-between;
	}

	.navTitleTextShell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.navTitleText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.45);
	}

	.redLine {
		width: 100%;
		height: 8rpx;
		background-color: #E32929;
	}

	.active {
		font-size: 34rpx;
		color: rgba(0, 0, 0, 0.85);
	}
	.eventShell{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.eventBigText{
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
	}
	.eventSmallText{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		margin-top: 20rpx;
	}
	.allPriceShell{
		margin-top: 30rpx;
	}
	.priceText{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}
	.allPrice{
		width: 100%;
		text-align: center;
		font-size: 76rpx;
		font-family: DIN;
		font-weight: bold;
		color: #000000;
	}
	.bottomShell{
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-bottom: 200rpx;
	}
	.item{
		width: 100%;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 32rpx 20rpx;
		margin-top: 15rpx;
	}
	.time{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}
	.titleShell{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.priceShell{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		margin-top: 30rpx;
	}
	.priceText1,.dayPrice{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}
	.dayPrice{
		margin-top: 24rpx;
	}
</style>
